<template>
    <div class="newsDetail">
        <van-nav-bar title="新闻详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="detailMain" v-if="newsDetail">
            <h2>{{ newsDetail.title }}</h2>
            <div class="source">
                <span>来源: {{ newsDetail.source }} &emsp;</span>
                <span class="createTime"> 浏览量:{{ newsDetail.clicks }}</span>
            </div>

            <div class="newsContent">
                &emsp;&emsp;
                <img v-if="newsDetail.img_url1" :src="newsDetail.img_url1" alt="" />
                <img v-if="newsDetail.img_url2" :src="newsDetail.img_url2" alt="" />
                <img v-if="newsDetail.img_url3" :src="newsDetail.img_url3" alt="" />
            </div>
            <div class="newsComment">
                <div class="newsCommentMain">
                    <div class="ncmt" v-if="ccode == 200">
                        <h3>评论区({{ newsCommentList.length }})</h3>
                        <span>点击查看更多</span>
                    </div>

                    <comment-item v-if="ccode == 200" :item="item" v-for="item in newsCommentList" :key="item.id"></comment-item>
                    <span class="empty" v-else><van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80" description="暂无评论" /></span>

                    <div class="ncmb">
                        <van-cell-group>
                            <van-field center clearable v-model="commentValue" placeholder="好的评论毒毒毒毒">
                                <template #button>
                                    <van-button @click="insertComment" size="small" type="primary">评论</van-button>
                                </template>
                            </van-field>
                        </van-cell-group>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import commentItem from "../../components/CommentItem.vue";
import moment from "moment";
import { Field, CellGroup, Button } from "vant";
import { ref, defineComponent, reactive, onMounted, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { selectComment, addComment, newsClick, newsImgCom } from "@/request/index";
let route = useRoute();
let router = useRouter();
let newsDetail = ref([]);
let ccode = ref(0);
let commentValue = ref("");
let newsCommentList = ref([]);

const sendComment = () => {
    newsImgCom({ id: route.query.id })
        .then((data) => {
            console.log(data);
            newsDetail.value = data.rows[0];
            console.log(newsDetail.value, 55556666);
            return newsDetail.value.id;
        })
        .then((x) => {
            console.log(x, 5556666);
            selectComment({ comment_id: x, db_id: "news_img_comment" }).then((data) => {
                ccode.value = data.code;
                if (ccode.value == 200) {
                    console.log(data);
                    newsCommentList.value = data.rows;
                    commentValue.value = "";
                }
            });
        });
};
onMounted(() => {
    sendComment();
});
const onClickLeft = () => history.back();
let title = ref("新闻详情");
defineComponent({
    commentItem,
});
const insertComment = () => {
    let time = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
    if (commentValue.value == "") {
        alert("内容不能为空");
        return;
    }
    let loginUser;
    if (localStorage.getItem("token")) {
        loginUser = localStorage.getItem("token");
    } else {
        loginUser = 2;
    }
    addComment(
        { comment_id: newsDetail.value.id, content: commentValue.value, create_time: time, user_id: loginUser, db_id: "news_img_comment" },
        { headers: { token: localStorage.getItem("autoToken") } }
    ).then((data) => {
        // console.log(data);
        if (data.code == 200) {
            sendComment();
        } else {
            alert(data.msg);
        }
    });
};
</script>
<style lang="scss">
@import "../../static/style/variable.scss";
.van-nav-bar .van-icon {
    color: $activeColor;
}
img {
    width: 100%;
}
.van-nav-bar__text {
    color: $activeColor;
}
.detailMain {
    padding: 0.2667rem;
    padding-bottom: 1.3333rem;
    h2 {
        font-size: 0.5333rem;
        line-height: 0.7467rem;

        text-align: center;
    }
    .source {
        margin-top: 0.5333rem;
        display: block;
        font-size: 0.3733rem;
        text-align: center;
        .createTime {
            font-size: 0.32rem;
        }
    }
    .newsContent {
        margin-top: 0.5333rem;
        line-height: 0.8rem;
        padding: 0 0.16rem 0.5333rem;
        border-bottom: 1px solid #ccc;
    }
    .newsComment {
        margin-top: 0.2667rem;
        padding-bottom: 0.2667rem;
        color: #666;
        .ncmt {
            display: flex;
            padding: 0.4rem 0.16rem 0;

            justify-content: space-between;
        }
        .ncmm {
            margin-top: 0.2667rem;
            border-bottom: 0.0136rem solid #ccc;
            padding-bottom: 0.2667rem;
            .ncmmtop {
                padding-top: 0.2667rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userContent {
                    display: flex;
                    align-items: center;
                }
                .userImg {
                    margin-left: 0.2667rem;
                    width: 0.64rem;
                    height: 0.64rem;
                }
                .userTitle {
                    margin-left: 0.16rem;
                }
                .userRight {
                    margin-right: 0.2667rem;
                    font-weight: 100;
                }
            }
            .ncmmMain {
                margin: 0 0.2667rem;
                margin-top: 0.2667rem;
                line-height: 0.5333rem;
                font-size: 0.3733rem;
                font-weight: 100;
                word-break: break-all;
                .reply {
                    margin-top: 0.2667rem;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .ncmb {
            margin-top: 0.4rem;
            padding: 0 0.2667rem;
        }
    }
}
</style>
